<template>
    <div class="report-detail">
        <div id="report">
            <div class="report-part ">
                <div class="report-one">
                    <report-one @getInfo="getInfo"></report-one>
                </div>
                <div class="report-two">
                    <report-two></report-two>
                </div>
            </div>
            <div class="report-part ">
                <div class="report-three">
                    <report-three></report-three>
                </div>
                <div class="report-four">
                    <report-four></report-four>
                </div>
            </div>
            <div class="report-part">
                <div class="report-five">
               <report-five v-if="style===1||style===3"></report-five>
               <report-wenzong v-if="style===2"></report-wenzong>
                </div>
            </div>
        </div>
        <div class="btn nprint">
            <!-- <el-button @click="$router.go(-1)">返回列表</el-button> -->
            <el-button @click="print">打印</el-button>
        </div>
        <div id="printPage">
            <img id="printImg" :src="src" alt="">
        </div>
    </div>
</template>
<script>
import ReportOne from './ReportOne.vue'
import ReportTwo from './ReportTwo.vue'
import ReportThree from './ReportThree.vue'
import ReportFour from './ReportFour.vue'
import ReportFive from './ReportFive.vue'
import ReportWenzong from './ReportWenzong.vue'
import util from 'lib/util'
export default {
    components: {
        ReportOne,
        ReportTwo,
        ReportThree,
        ReportFour,
        ReportFive,
        ReportWenzong
    },

    data() {
        return {
            src: '',
            showLoading: { loading: false },
            style:''
        }
    },
    created() {
    },
    mounted() {
        this.init()
    },
    methods: {
        getInfo(info){
            this.style=info.style
        },
        init() {
        },
        print() {
            window.print()
        }
    }
}
</script>
<style lang="less" scoped>
.btn {
    padding: 20px;
    text-align: center;
    .el-button {
        background: #488eed;
        color: #fff;
        font-size: 18px;
    }
}
</style>
<style lang="less">
@media print {
    .report-detail {
        .level,.table-head,.cell,.list h4,.list h4 span {
            color: black !important;
        }
        th,
        td,.low,.middle,.height {
            border-color: black !important;
        }
        -webkit-print-color-adjust: exact;
        .header{
            height: 230px !important;
            .title{
                top:100px !important;
            }
        }
        .suggest{
            p{
                height: 50px !important;
            }
        }
    }
}
</style>

